<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="navbar">
      <view class="navbar-left" @click="goBack">
        <text class="navbar-back">←</text>
      </view>
      <text class="navbar-title">{{ isEditMode ? '编辑商品' : '发布二手好物' }}</text>
      <button class="navbar-publish" @click="onPublish" :disabled="publishing">
          {{ publishing ? (isEditMode ? '保存中...' : '发布中...') : (isEditMode ? '保存' : '发布') }}
        </button>
    </view>

    <!-- 发布表单 -->
    <scroll-view scroll-y class="form-area">
      <!-- 上传图片 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">商品图片</text>
          <text class="section-tip">{{ images.length }}/6</text>
        </view>
        <view class="img-grid">
          <view
            v-for="(img, idx) in images"
            :key="idx"
            class="img-item"
            @click="previewImage(idx)"
          >
            <image :src="img" class="img" mode="aspectFill" @error="onImageError" />
            <view class="img-remove" @click.stop="removeImg(idx)">
              <text class="remove-icon">×</text>
            </view>
          </view>
          <view
            v-if="images.length < 6"
            class="img-item img-upload"
            @click="chooseImage"
          >
            <text class="upload-icon">+</text>
            <text class="upload-text">添加图片</text>
          </view>
        </view>
      </view>

      <!-- 商品标题 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">商品标题 *</text>
          <text class="section-tip">{{ title.length }}/30</text>
        </view>
        <input 
          class="input" 
          v-model="title" 
          placeholder="请输入商品标题，简洁明了" 
          maxlength="30"
          @input="validateTitle"
        />
        <text v-if="titleError" class="error-text">{{ titleError }}</text>
      </view>

      <!-- 商品描述 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">商品描述 *</text>
          <text class="section-tip">{{ desc.length }}/200</text>
        </view>
        <textarea 
          class="textarea" 
          v-model="desc" 
          placeholder="请详细描述商品情况，如新旧程度、使用体验、购买时间等" 
          maxlength="200"
          @input="validateDesc"
        />
        <text v-if="descError" class="error-text">{{ descError }}</text>
      </view>

      <!-- 商品分类 -->
      <view class="section">
        <view class="row-between">
          <text class="section-title">商品分类 *</text>
          <picker
            mode="multiSelector"
            :range="categoryRange"
            @change="onCategoryChange"
            @columnchange="onCategoryColumnChange"
          >
            <view class="select-btn" :class="{ 'selected': categoryText }">
              {{ categoryText || '请选择分类' }}
              <text class="arrow">></text>
            </view>
          </picker>
        </view>
        <text v-if="categoryError" class="error-text">{{ categoryError }}</text>
      </view>

      <!-- 价格信息 -->
      <view class="section">
        <text class="section-title">价格信息</text>
        <view class="price-container">
          <view class="price-item">
            <text class="price-label">售价 *</text>
            <view class="price-input-wrapper">
              <text class="price-symbol">¥</text>
              <input 
                class="price-input" 
                v-model="price" 
                type="digit" 
                placeholder="0.00" 
                @input="validatePrice"
              />
            </view>
          </view>
          <view class="price-item">
            <text class="price-label">原价</text>
            <view class="price-input-wrapper">
              <text class="price-symbol">¥</text>
              <input 
                class="price-input" 
                v-model="originPrice" 
                type="digit" 
                placeholder="选填"
              />
            </view>
          </view>
        </view>
        <text v-if="priceError" class="error-text">{{ priceError }}</text>
      </view>

      <!-- 交易方式 -->
      <view class="section">
        <text class="section-title">交易方式 *</text>
        <view class="deal-options">
          <view class="deal-item" @click="selectDeal('face')" :class="{ active: dealMethod === 'face' }">
            <text class="deal-text">面交</text>
          </view>
          <view class="deal-item" @click="selectDeal('mail')" :class="{ active: dealMethod === 'mail' }">
            <text class="deal-text">邮寄</text>
          </view>
        </view>
        <text v-if="dealError" class="error-text">{{ dealError }}</text>
      </view>

      <!-- 位置信息 -->
      <view class="section">
        <view class="row-between">
          <text class="section-title">位置 *</text>
          <view class="select-btn" @click="chooseLocation" :class="{ 'selected': location }">
            {{ location || '请选择位置' }}
            <text class="arrow">></text>
          </view>
        </view>
        <text v-if="locationError" class="error-text">{{ locationError }}</text>
      </view>

      <!-- 发布设置 -->
      <view class="section">
        <text class="section-title">发布设置</text>
        <view class="setting-item">
          <view class="setting-info">
            <text class="setting-label">自动续费</text>
            <text class="setting-desc">到期后自动续费，保持商品展示</text>
          </view>
          <switch color="#FF5E5E" v-model="autoRenew" />
        </view>
        <view class="setting-item">
          <view class="setting-info">
            <text class="setting-label">允许砍价</text>
            <text class="setting-desc">买家可以发起议价请求</text>
          </view>
          <switch color="#FF5E5E" v-model="allowBargain" />
        </view>
      </view>

      <!-- 发布按钮 -->
      <view class="publish-section">
        <button 
          class="publish-btn" 
          @click="onPublish" 
          :disabled="publishing || !canPublish"
          :class="{ 'disabled': publishing || !canPublish }"
        >
          {{ publishing ? (isEditMode ? '保存中...' : '发布中...') : (isEditMode ? '确认保存' : '确认发布') }}
        </button>
        <text class="tip">点击发布即表示您同意《用户协议》和《隐私政策》</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { request } from '@/utils/request.js';
import { uploadImage } from '@/utils/upload.js';
import { API_BASE_URL } from '@/utils/config.js';

export default {
  data() {
    return {
      // 基本信息
      productId: '', // 商品ID，编辑时使用
      images: [],
      title: '',
      desc: '',
      price: '',
      originPrice: '',
      dealMethod: '', // 交易方式：'face'面交, 'mail'邮寄
      location: '',
      autoRenew: true,
      allowBargain: false,
      
      // 状态管理
      isEditMode: false, // 是否为编辑模式
      publishing: false,
      uploading: false,
      loading: false, // 加载商品数据状态
      
      // 验证错误
      titleError: '',
      descError: '',
      priceError: '',
      categoryError: '',
      dealError: '',
      locationError: '',
      
      // 分类相关
      categoryTree: [],
      categoryRange: [[], [], []],
      categoryIndex: [0, 0, 0],
      categoryText: '',
      categoryId: ''
    }
  },
  
  computed: {
    // 是否可以发布
    canPublish() {
       return this.images.length > 0 && 
              this.title.trim() && 
              this.desc.trim() && 
              this.price && 
              this.categoryText && 
              this.location &&
              this.dealMethod &&
              !this.titleError &&
              !this.descError &&
              !this.priceError &&
              !this.categoryError &&
              !this.dealError &&
              !this.locationError;
     }
  },
  
  methods: {
    // 返回上一页
    goBack() {
      if (this.hasChanges()) {
        uni.showModal({
          title: '提示',
          content: '您有未保存的内容，确定要离开吗？',
          success: (res) => {
            if (res.confirm) {
              uni.navigateBack();
            }
          }
        });
      } else {
        uni.navigateBack();
      }
    },
    
    // 检查是否有修改
    hasChanges() {
      return this.images.length > 0 || 
             this.title.trim() || 
             this.desc.trim() || 
             this.price || 
             this.originPrice || 
             this.categoryText || 
             this.location;
    },
    
    // 选择图片
    chooseImage() {
      if (this.uploading) {
        uni.showToast({ title: '正在上传中...', icon: 'none' });
        return;
      }
      
      uni.chooseImage({
        count: 6 - this.images.length,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.uploadImages(res.tempFilePaths);
        }
      });
    },
    
    // 上传图片
    async uploadImages(filePaths) {
      this.uploading = true;
      uni.showLoading({ title: '上传中...' });
      
      try {
        for (const filePath of filePaths) {
          const imageUrl = await uploadImage({ filePath });
          console.log('上传返回的图片URL:', imageUrl);
          if (imageUrl) {
            // 使用Vue.set确保响应式更新
            this.$set(this.images, this.images.length, imageUrl);
            console.log('当前images数组:', this.images);
            console.log('images数组长度:', this.images.length);
          }
        }
        uni.showToast({ title: '上传成功', icon: 'success' });
      } catch (err) {
        console.error('上传失败:', err);
        uni.showToast({ title: err.message || '上传失败', icon: 'none' });
      } finally {
        this.uploading = false;
        uni.hideLoading();
      }
    },
    
    // 删除图片
    removeImg(idx) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这张图片吗？',
        success: (res) => {
          if (res.confirm) {
            this.images.splice(idx, 1);
          }
        }
      });
    },
    
    // 预览图片
    previewImage(current) {
      uni.previewImage({
        current: current,
        urls: this.images
      });
    },
    
    // 图片加载错误
    onImageError(e) {
      console.warn('图片加载失败:', e);
      uni.showToast({ title: '图片加载失败', icon: 'none' });
    },
    
    // 验证方法
     validateTitle() {
       this.titleError = '';
       if (!this.title.trim()) {
         this.titleError = '请输入商品标题';
       } else if (this.title.length < 2) {
         this.titleError = '标题至少2个字符';
       }
     },
     
     validateDesc() {
       this.descError = '';
       if (!this.desc.trim()) {
         this.descError = '请输入商品描述';
       } else if (this.desc.length < 10) {
         this.descError = '描述至少10个字符';
       }
     },
     
     validatePrice() {
       this.priceError = '';
       const price = parseFloat(this.price);
       if (!this.price) {
         this.priceError = '请输入价格';
       } else if (isNaN(price) || price <= 0) {
         this.priceError = '请输入有效价格';
       } else if (price > 999999) {
         this.priceError = '价格不能超过999999';
       }
     },
     
     // 选择交易方式（单选）
     selectDeal(type) {
       this.dealMethod = type;
       this.dealError = '';
     },
     
     validateDeal() {
       this.dealError = '';
       if (!this.dealMethod) {
         this.dealError = '请选择交易方式';
       }
     },
     
     // 选择位置
     chooseLocation() {
       const locations = [
         '广州天河', '广州越秀', '广州海珠', '广州番禺',
         '深圳南山', '深圳福田', '深圳罗湖', '深圳宝安',
         '北京海淀', '北京朝阳', '北京西城', '北京东城',
         '上海浦东', '上海徐汇', '上海黄浦', '上海静安',
         '其他地区'
       ];
       uni.showActionSheet({
         itemList: locations,
         success: (res) => {
           this.location = locations[res.tapIndex];
           this.locationError = '';
         }
       });
     },
    
    // 分类相关方法
     async loadCategory() {
       try {
         const data = await request({ url: '/api/category/list' });
         this.categoryTree = data || [];
         this.initCategoryRange();
       } catch (err) {
         console.error('加载分类失败:', err);
         // 使用默认分类
         this.categoryTree = [
           { id: '1', name: '数码产品', children: [
             { id: '11', name: '手机', children: [{ id: '111', name: '苹果' }, { id: '112', name: '华为' }] },
             { id: '12', name: '电脑', children: [{ id: '121', name: '笔记本' }, { id: '122', name: '台式机' }] }
           ]},
           { id: '2', name: '生活用品', children: [
             { id: '21', name: '家具', children: [{ id: '211', name: '桌椅' }, { id: '212', name: '床具' }] }
           ]}
         ];
         this.initCategoryRange();
       }
     },
     
     initCategoryRange() {
       if (!this.categoryTree.length) return;
       
       const first = this.categoryTree;
       const second = first[0]?.children || [];
       const third = second[0]?.children || [];
       
       this.categoryRange = [
         first.map(i => i.name),
         second.map(i => i.name),
         third.map(i => i.name)
       ];
     },
     
     onCategoryColumnChange(e) {
       const column = e.detail.column;
       const value = e.detail.value;
       this.categoryIndex[column] = value;
       
       if (column === 0) {
         const second = this.categoryTree[value]?.children || [];
         const third = second[0]?.children || [];
         this.categoryRange[1] = second.map(i => i.name);
         this.categoryRange[2] = third.map(i => i.name);
         this.categoryIndex[1] = 0;
         this.categoryIndex[2] = 0;
       } else if (column === 1) {
         const firstIdx = this.categoryIndex[0];
         const second = this.categoryTree[firstIdx]?.children || [];
         const third = second[value]?.children || [];
         this.categoryRange[2] = third.map(i => i.name);
         this.categoryIndex[2] = 0;
       }
     },
     
     onCategoryChange(e) {
       this.categoryIndex = e.detail.value;
       const [i, j, k] = this.categoryIndex;
       const first = this.categoryTree[i];
       const second = first?.children?.[j];
       const third = second?.children?.[k];
       
       this.categoryText = [first?.name, second?.name, third?.name]
         .filter(Boolean)
         .join(' / ');
       this.categoryId = third?.id || second?.id || first?.id;
       this.categoryError = '';
     },
    
    // 发布商品
     async onPublish() {
       if (this.publishing) return;
       
       // 执行所有验证
       this.validateAll();
       
       if (!this.canPublish) {
         uni.showToast({ title: '请完善商品信息', icon: 'none' });
         return;
       }
       
       this.publishing = true;
       uni.showLoading({ title: this.isEditMode ? '保存中...' : '发布中...' });
       
       try {
         // 处理图片URL - 确保格式正确
         const imageUrls = this.images.map(url => {
           if (!url) return '';
           // 如果是完整URL，提取相对路径部分
           if (url.startsWith('http')) {
             const idx = url.indexOf('/uploads/');
             return idx !== -1 ? url.substring(idx) : url;
           }
           // 如果已经是相对路径，直接返回
           if (url.startsWith('/uploads/')) {
             return url;
           }
           // 其他情况直接返回原URL
           return url;
         });
         
         // 根据API文档组装参数
         const deliveryMethod = this.getDeliveryMethod();
         const bargainOption = this.getBargainOption();
         
         const params = {
           title: this.title.trim(),
           description: this.desc.trim(),
           category: this.categoryText,
           price: Number(this.price),
           originPrice: Number(this.originPrice) || null,
           deliveryMethod: deliveryMethod,
           bargainOption: bargainOption,
           location: this.location,
           autoRenew: this.autoRenew,
           imageUrls: imageUrls
         };
         
         // 根据模式选择不同的接口
         let apiUrl = '/api/product/add'; // 默认新增接口
         
         if (this.isEditMode && this.productId) {
           apiUrl = '/api/product/save'; // 编辑模式使用保存接口
           params.id = this.productId; // 编辑模式添加商品ID
         }
         
         const res = await request({
           url: apiUrl,
           method: 'POST',
           data: params
         });
         
         uni.showToast({ 
           title: this.isEditMode ? '保存成功！' : '发布成功！', 
           icon: 'success' 
         });
         
         // 跳转到商品详情页
         const productId = res?.id || this.productId;
         if (productId) {
           setTimeout(() => {
             uni.redirectTo({
               url: `/pages/productDetail/index?id=${productId}`
             });
           }, 1000);
         } else {
           setTimeout(() => {
             uni.navigateBack();
           }, 1000);
         }
         
       } catch (err) {
         console.error('发布失败:', err);
         uni.showToast({ 
           title: err?.message || '发布失败，请重试', 
           icon: 'none' 
         });
       } finally {
         this.publishing = false;
         uni.hideLoading();
       }
     },
     
     // 执行所有验证
     validateAll() {
       this.validateTitle();
       this.validateDesc();
       this.validatePrice();
       this.validateDeal();
       
       if (!this.categoryText) {
         this.categoryError = '请选择商品分类';
       }
       
       if (!this.location) {
         this.locationError = '请选择位置';
       }
     },
     
     // 获取交易方式枚举值
     getDeliveryMethod() {
       switch (this.dealMethod) {
         case 'face':
           return 1; // DeliveryMethod.FaceToFace
         case 'mail':
           return 2; // DeliveryMethod.Mail
         default:
           return 1;
       }
     },
     
     // 获取议价选项枚举值
     getBargainOption() {
       return this.allowBargain ? 2 : 1; // AllowBargain:2, NoBargain:1
     },
     
     // 加载商品数据（编辑模式）
     async loadProductData() {
       if (!this.productId) return;
       
       this.loading = true;
       try {
         const res = await request({
           url: `/api/product/${this.productId}`
         });
         
         // 填充表单数据
         this.title = res.title || '';
         this.desc = res.description || '';
         this.price = res.price ? res.price.toString() : '';
         this.originPrice = res.originPrice ? res.originPrice.toString() : '';
         this.location = res.location || '';
         this.autoRenew = res.autoRenew !== undefined ? res.autoRenew : true;
         this.allowBargain = res.bargainOption === 2; // 2为允许砍价
         
         // 处理图片URL，确保在编辑页面能正确显示
         this.images = (res.imageUrls || []).map(url => {
           if (!url) return '';
           // 如果是相对路径，转换为完整URL
           if (url.startsWith('/uploads/')) {
             return API_BASE_URL + url;
           }
           // 如果已经是完整URL，直接返回
           return url;
         });
         
         // 设置交易方式
         if (res.deliveryMethod === 1) {
           this.dealMethod = 'face';
         } else if (res.deliveryMethod === 2) {
           this.dealMethod = 'mail';
         }
         
         // 设置分类
         if (res.category) {
           this.categoryText = res.category;
         }
         
       } catch (err) {
         console.error('加载商品数据失败:', err);
         uni.showToast({ 
           title: '加载商品数据失败', 
           icon: 'none' 
         });
       } finally {
         this.loading = false;
       }
     }
  },
  
  onLoad(options) {
    this.loadCategory();
    
    // 检查是否为编辑模式
    if (options.id) {
      this.productId = options.id;
      this.isEditMode = true;
      this.loadProductData();
    }
  },
  
  onUnload() {
    // 页面卸载时清理
  }
 }
</script>

<style scoped>
/* 容器样式 */
.container {
  background: #f5f5f5;
  min-height: 100vh;
}

/* 导航栏 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.navbar-left {
  padding: 8px;
  cursor: pointer;
}

.navbar-back {
  font-size: 20px;
  color: #333;
  font-weight: bold;
}

.navbar-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.navbar-publish {
  background: #FF5E5E;
  color: #fff;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 500;
}

.navbar-publish:disabled {
  background: #ccc;
  color: #999;
}

/* 表单区域 */
.form-area {
  padding: 12px;
  padding-bottom: 80px;
}

/* 区块样式 */
.section {
  background: #fff;
  margin-bottom: 12px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.section-tip {
  font-size: 12px;
  color: #999;
}

/* 图片上传 */
.img-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.img-item {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  background: #f8f8f8;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-upload {
  border: 2px dashed #ddd;
  background: #fafafa;
  cursor: pointer;
  flex-direction: column;
  transition: all 0.3s;
}

.img-upload:active {
  background: #f0f0f0;
}

.upload-icon {
  font-size: 24px;
  color: #999;
  margin-bottom: 4px;
}

.upload-text {
  font-size: 10px;
  color: #999;
}

.img-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.remove-icon {
  font-weight: bold;
}

/* 输入框样式 */
.input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 15px;
  background: #fafafa;
  margin-top: 8px;
  transition: border-color 0.3s;
}

.input:focus {
  border-color: #FF5E5E;
  background: #fff;
}

.textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 15px;
  background: #fafafa;
  margin-top: 8px;
  min-height: 100px;
  resize: none;
  transition: border-color 0.3s;
}

.textarea:focus {
  border-color: #FF5E5E;
  background: #fff;
}

/* 错误提示 */
.error-text {
  color: #ff4757;
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

/* 布局样式 */
.row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.row {
  display: flex;
  align-items: center;
}

/* 选择按钮 */
.select-btn {
  color: #999;
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #fafafa;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.select-btn.selected {
  color: #333;
  border-color: #FF5E5E;
  background: #fff;
}

.arrow {
  color: #ccc;
  font-size: 12px;
}

/* 价格容器 */
.price-container {
  margin-top: 12px;
}

.price-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.price-item:last-child {
  margin-bottom: 0;
}

.price-label {
  font-size: 14px;
  color: #666;
  min-width: 60px;
}

.price-input-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #fafafa;
  padding: 8px 12px;
  transition: border-color 0.3s;
}

.price-input-wrapper:focus-within {
  border-color: #FF5E5E;
  background: #fff;
}

.price-symbol {
  font-size: 16px;
  color: #FF5E5E;
  margin-right: 4px;
  font-weight: 500;
}

.price-input {
  border: none;
  background: transparent;
  font-size: 15px;
  width: 100px;
  outline: none;
}

/* 交易方式 */
.deal-options {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.deal-item {
  padding: 8px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  background: #fafafa;
  cursor: pointer;
  transition: all 0.3s;
}

.deal-item.active {
  background: #FF5E5E;
  border-color: #FF5E5E;
}

.deal-text {
  font-size: 14px;
  color: #666;
}

.deal-item.active .deal-text {
  color: #fff;
}

/* 设置项 */
.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-info {
  flex: 1;
}

.setting-label {
  font-size: 15px;
  color: #333;
  display: block;
  margin-bottom: 2px;
}

.setting-desc {
  font-size: 12px;
  color: #999;
}

/* 发布区域 */
.publish-section {
  background: #fff;
  margin-bottom: 12px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.publish-btn {
  width: 100%;
  background: #FF5E5E;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px 0;
  font-size: 16px;
  font-weight: bold;
  transition: background 0.3s;
}

.publish-btn:active {
  background: #e74c3c;
}

.publish-btn.disabled {
  background: #ccc;
  color: #999;
}

.tip {
  display: block;
  color: #999;
  font-size: 11px;
  text-align: center;
  margin-top: 12px;
  line-height: 1.4;
}
</style>